<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入
* Turf (https://github.com/Turfjs/turf/)
* xlsx (https://github.com/SheetJS/sheetjs)
*********************************************************************-->

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title data-i18n='resources.title_spatialAnalysis'></title>
    <script type="text/javascript" src="../js/include-web.js"></script>
    <script type="text/javascript" include="iclient-leaflet-css,turf,xlsx" src="../../dist/leaflet/include-leaflet.js"></script>
    <style>
        .leaflet-popup,
        .leaflet-popup-content-wrapper {
            padding: 0;
        }
        .leaflet-popup-content {
            margin: 0;
        }
    </style>
</head>

<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
    <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
    <div id="loading">....</div>
    <script type="text/javascript">
        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
        var map, url = host + "/iserver/services/map-china/rest/maps/ChinaDark";
        map = L.map('map', {
            crs: L.CRS.EPSG3857,
            center: [31.3677, 108.116],
            maxZoom: 20,
            minZoom: 3,
            zoom: 7
        });
        var baseLayer = new L.supermap.TiledMapLayer(url).addTo(map);

        var control = L.control.layers().addTo(map).setPosition('topleft').addBaseLayer(baseLayer, 'baseLayer');
        
        // worker 路径，默认为 dist/leaflet/workers/TurfWorker.js
        var workerUrl = '../../dist/leaflet/workers/TurfWorker.js';
        var clientComputation = new L.supermap.Components.ClientComputation(workerUrl).addTo(map);

        query();
        function query() {

            var queryUrl = "https://www.supermapol.com/iserver/services/map_ShiLiShuJu/rest/maps/中国历史5级以上地震_1900至2016@自然气候数据"
            var params = new L.supermap.QueryBySQLParameters({
                queryParams: {
                    name: "中国历史5级以上地震_1900至2016@自然气候数据",
                    attributeFilter: "SMID>0"
                }
            })

            new L.supermap
                .QueryService(queryUrl)
                .queryBySQL(params).then(function (serviceResult) {
                    var result = L.supermap.Util.transform(serviceResult.result.recordsets[0].features, L.CRS.EPSG3857, L.CRS.EPSG4326);
                    var resultLayer = L.geoJSON(result, {
                        style: { fillColor: '#ff7373', color: '#ff7373', opacity: 1, fillOpacity: 0.8 },
                        pointToLayer: function (geoJsonPoint, latLng) {
                            return L.circleMarker(latLng, { radius: 6, color: '#ff7373', fillColor: '#ff7373' })
                        }
                    }).addTo(map);

                    map.flyToBounds(resultLayer.getBounds());
                    control.addOverlay(resultLayer, resources.text_spatialAnalysisLayerName);

                    var setLayer = {
                        'layerName': resources.text_spatialAnalysisLayerName,
                        'layer': resultLayer,
                        'fields': ['震级', '深度', '经度', '纬度', 'SmID', 'SmX', 'SmY']
                    };
                    var clientComputationLayer = new L.supermap.Components.ClientComputationLayer(setLayer);
                    clientComputation.addLayer(clientComputationLayer);
                });
        }

        // 打开文件
        var openFile = new L.supermap.Components.OpenFile().addTo(map).setPosition('bottomleft');

        openFile.viewModel.on('openfilesucceeded', function (e) {
            var layer = L.geoJSON(e.result, {
                style: { fillColor: '#ff7373', color: '#ff7373', opacity: 1, fillOpacity: 0.8 }
            }).addTo(map);
            var setLayer = {
                'layerName': e.layerName,
                'layer': layer
            };
            map.flyToBounds(layer.getBounds());
            control.addOverlay(layer, e.layerName);
            var clientComputationLayer = new L.supermap.Components.ClientComputationLayer(setLayer);
            clientComputation.addLayer(clientComputationLayer);
        })

        clientComputation.on("analysissucceeded", function (e) {
            control.addOverlay(e.layer, e.name);
        })
        clientComputation.on("layersremoved", function (e) {
            for (var i in e.layers) {
                control.removeLayer(e.layers[i]);
            }
        })
    </script>
</body>

</html>